<template>
  <div class="Articledetail">
    <Head msg="文章详情"></Head>
    <div class="search-main">
      <div>一键搜索：</div>
      <input
        type="text"
        class="search-input"
        placeholder="输入关键字，如：宝马，奔驰"
        v-model="searchvalue"
      />
      <div class="search-btn" @click="tosearch">搜索</div>
    </div>
    <div style="height: 5px;width: 100vw;background: white"></div>
    <div class="scroll">
      <cube-scroll
        ref="scroll"
        :data="comment"
        :options="options"
        @pulling-up="commentList"
        @scroll="scrollHandler"
        :scroll-events="['scroll']"
      >
        <div class="article-main">
          <div class="article-list">
            <!--        <img src="../../public/img/icons/favicon-16x16.png" class="article-pic">-->
            <div class="article-content">
              <div class="article-title">{{ articleinfo.title }}</div>
              <div class="article-information">
                <div>作者：{{ articleinfo.author }}</div>
                <!--            <div>评论：103</div>-->
                <div>发表时间：{{ articleinfo.create_time }}</div>
              </div>
            </div>
          </div>
          <div class="article-body">
            <div v-html="articecontent" class="detail-title"></div>
            <img
              v-for="item in articleinfo.files"
              class="detail-pic"
              :src="item.file"
              :key="item.article_id"
              @load="refreshImg"
            />
          </div>
        </div>
        <div class="read-num">
          <div class="read-num-title">阅读量：{{ articleinfo.view }}</div>
          <div class="read-num-dot" @click="doPraise">
            <img
              class="dot-pic"
              :src="
                praise
                  ? publicPath + 'img/icons/icon-dot-select.png'
                  : publicPath + 'img/icons/icon-dot.png'
              "
            />
            <div class="dot-title">{{ articleinfo.praise }}</div>
          </div>
        </div>

        <Adv
          v-if="advStatus"
          :type="advtype"
          :value="advvalue"
          :advurl="advurl"
          :advcover="advcover"
          :advtitle="advtitle"
          :showtitle="showtitle"
        ></Adv>
        <!--        <img class="article-ad" src="../../public/img/icons/apple-touch-icon-60x60.png">-->
        <div class="article-comment">
          <div
            class="comment-list"
            v-for="(item, index) in comment"
            :key="index"
          >
            <div class="comment-list-top">
              <div class="top-head">
                <img class="top-pic" :src="item.member.avatar" />
                <div class="top-title">{{ item.member.nickname }}</div>
              </div>
              <div
                v-if="item.status == 1"
                class="read-num-dot"
                @click="commentPraise(item.id)"
              >
                <img
                  class="dot-pic"
                  :src="
                    item.is_praise
                      ? publicPath + 'img/icons/icon-dot-select.png'
                      : publicPath + 'img/icons/icon-dot.png'
                  "
                />
                <div class="dot-title">{{ item.praise }}</div>
              </div>
            </div>
            <div class="comment-title">{{ item.content }}</div>
            <div class="comment-time">{{ item.create_time }}</div>
          </div>
        </div>
      </cube-scroll>
    </div>

    <div class="comment-foot">
      <input
        v-model="content"
        class="comment-input"
        placeholder="参与评论··· ···"
      />
      <div class="send-btn" @click="commentArticle">发送</div>
      <!--            <img src="../../public/img/icons/icon-news.png" @click="commentArticle">-->
      <img
        @click="doCollect"
        :src="
          collect
            ? publicPath + 'img/icons/icon-collect-success.png'
            : publicPath + 'img/icons/icon-collect-real.png'
        "
      />
      <img
        @click="doPraise"
        :src="
          praise
            ? publicPath + 'img/icons/icon-dot-success.png'
            : publicPath + 'img/icons/icon-dot-real.png'
        "
      />
      <img src="../../public/img/icons/icon-send.png" @click="copyurl" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch } from 'vue-property-decorator';
import Adv from '@/components/Adv.vue';
import Sence from '../sence/Sence';
import Head from '@/components/Head.vue';

@Component({
  components: {
    Head,
    Adv,
  },
})
export default class Articledetail extends Sence {
  public options: object = {
    pullUpLoad: true,
  }; // 下拉加载
  public user: any = '';
  // public files:any=[];
  public searchvalue: any = ''; // 当前搜索框内容
  private publicPath: string = process.env.BASE_URL;
  public articleinfo: any = {}; // 文章信息
  public articecontent: any = ''; // 文章内容
  public content: string = ''; // 评论内容
  public id: string = ''; // 文章id
  public page: number = 1; // 评论页数
  public size: number = 10; // 评论记录数字
  public comment: any = []; // 评论列表数据
  public collect: boolean = false; // 文章是否已收藏
  public praise: boolean = false; // 文章是否已点赞
  public advtype: any = ''; // 广告类别
  public advvalue: any = ''; // 广告图片
  public advurl: any = ''; // 广告链接
  public advcover: any = ''; // 广告视频封面
  public advtitle: string = ''; // 广告视频标题
  public showtitle: number = 0; // 广告视频标题是否显示
  public advStatus: boolean = false; // 广告视频标题是否实例化
  public mounted(): void {
    this.id = (<any>this).$route.query.id;
    this.user = this.getuser();
    this.infoArticle();
    this.commentList();
    this.isCollect();
    this.isPraise();
    this.doView();
    this.wxshare();
    setTimeout(() => {
      (<any>this).$refs.scroll.refresh();
    }, 100);
  }

  @Watch('articecontent')
  private articeHandler(n: any, o: any) {
    setTimeout(() => {
      (<any>this).$refs.scroll.refresh();
    }, 300);
  }

  @Watch('content')
  private contentHandler(n: any, o: any) {
    setTimeout(() => {
      (<any>this).$refs.scroll.refresh();
    }, 300);
  }

  //广告接口
  public articleDetailAdv(): void {
    this.post('api/v1/articleDetailAdv', {}).then((res: any) => {
      let data = res.data;
      this.advtype = data.adv_type;
      this.advtitle = data.adv_title;
      this.showtitle = data.show_title;
      if (data.adv_type == 1) {
        this.advvalue = data.ele_id;
      } else if (data.adv_type == 2) {
        this.advvalue = data.adv_img;
        this.advurl = data.adv_img_url;
      } else if (data.adv_type == 3) {
        this.advvalue = data.adv_video;
        this.advurl = data.adv_video_url;
        this.advcover = data.adv_video_cover;
      }
      this.$nextTick(() => {
        this.advStatus = true;
        (<any>this).$refs.scroll.refresh();
      });
    });
  }

  // 发布评价
  public commentArticle(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/commentArticle', {
        article_id: this.articleinfo.id,
        content: this.content,
      }).then((res: any) => {
        this.toast('评论成功');
        this.post('api/v1/commentList', {
          uid: this.user.id || '',
          object_name: 'article',
          object_id: this.id,
          mine: 0,
          page: 1,
          size: this.size * this.page,
        }).then((res: any) => {
          this.getLastComment();
          // this.comment = res.data.list;
        });
      });
    } else {
      this.toast('请先登录！');
    }
  }

  // 文章详情
  public infoArticle(): void {
    this.post('api/v1/infoArticle', { article_id: this.id }).then(
      (res: any) => {
        this.articleinfo = res.data.info;
        this.articecontent = res.data.info.content
          .replace(
            /\<img/gi,
            '<img style="max-width:100%;height:auto;display:block;margin:0 auto;" '
          )
          .replace(
            /\<video/gi,
            '<video style="max-width:100%;height:auto;display:block;margin:0 auto;" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline'
          );
        setTimeout(() => {
          this.articleDetailAdv();
          (<any>this).$refs.scroll.refresh();
        }, 300);
        this.qqPay();
      }
    );
  }
  private scrollHandler(e: any) {
    (<any>this).$refs.scroll.refresh();
  }

  // 评论列表
  public commentList(): void {
    this.post('api/v1/commentList', {
      uid: this.user ? this.user.id : '',
      object_name: 'article',
      object_id: this.id,
      mine: 0,
      page: this.page,
      size: this.size,
    }).then((res: any) => {
      this.comment = [...this.comment, ...res.data.list];
      this.page += 1;
      if (res.data.list.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
      setTimeout(() => {
        (<any>this).$refs.scroll.refresh();
      }, 300);
    });
  }

  // 文章收藏
  public doCollect(): void {
    if (!localStorage.getItem('user')) {
      this.toast('请先登录！');
      return;
    }
    this.post('api/v1/doCollect', {
      type: 'collect',
      object_name: 'article',
      object_id: this.id,
    }).then((res: any) => {
      this.isCollect();
    });
  }

  // 文章点赞
  public doPraise(): void {
    if (!localStorage.getItem('user')) {
      this.toast('请先登录！');
      return;
    }
    this.post('api/v1/doCollect', {
      type: 'praise',
      object_name: 'article',
      object_id: this.id,
    }).then((res: any) => {
      this.isPraise();
      this.infoArticle();
    });
  }

  // 评论点赞
  public commentPraise(id: number): void {
    if (!localStorage.getItem('user')) {
      this.toast('请先登录！');
      return;
    }
    this.post('api/v1/doCollect', {
      type: 'praise',
      object_name: 'comment',
      object_id: id,
    }).then((res: any) => {
      this.post('api/v1/commentList', {
        uid: this.user.id || '',
        object_name: 'article',
        object_id: this.id,
        mine: 0,
        page: 1,
        size: this.size * this.page,
      }).then((res: any) => {
        setTimeout(() => {
          (<any>this).$refs.scroll.refresh();
        }, 200);
        this.comment = res.data.list;
      });
    });
  }

  // 判断文章是否已收藏
  public isCollect(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/isCollect', {
        type: 'collect',
        object_name: 'article',
        object_id: this.id,
      }).then((res: any) => {
        this.collect = res.data.is_collect;
      });
    }
  }

  // 判断文章是否已点赞
  public isPraise(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/isCollect', {
        type: 'praise',
        object_name: 'article',
        object_id: this.id,
      }).then((res: any) => {
        this.praise = res.data.is_collect;
      });
    }
  }

  // 复制链接
  public copyurl(): void {
    // const data: string = this.apiurl + 'dist/#' + (<any> this).$route.fullPath;
    const data: string = window.location.href;
    this.copy(data);
    this.toast('链接复制成功');
  }

  // 阅读信息接口
  public doView(): void {
    if (localStorage.getItem('user')) {
      this.post('api/v1/doView', {
        object_name: 'article',
        object_id: this.id,
      });
    }
  }

  // 搜索
  public tosearch(): void {
    this.$router.push(`/?keyword=${this.searchvalue}`);
  }

  // 微信分享
  public wxshare(): void {
    this.post('api/v1/getWxShare', {
      object_type: 'article',
      object_id: this.id,
      refer_url: this.referurl(window.location.href),
    }).then((res: any) => {
      let config: any = res.data.share_config;
      let info: any = res.data.share_info;
      (<any>window).wx.config({
        debug: config.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: config.jsApiList, // 必填，需要使用的JS接口列表
      });
      (<any>window).wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        (<any>window).wx
          .onMenuShareAppMessage({
            title: info.title, // 分享标题
            desc: info.desc, // 分享描述
            link: info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: info.imgUrl, // 分享图标
            type: '',
            success: function() {},
          })(<any>window)
          .wx.onMenuShareQQ({
            title: info.title, // 分享标题
            desc: info.desc, // 分享描述
            link: info.link, // 分享链接
            imgUrl: info.imgUrl, // 分享图标
            success: function() {
              // 用户确认分享后执行的回调函数
            },
          });
      });
    });
  }

  // qq分享配置
  public qqPay(): void {
    const elem1 = (<any>window).document.getElementById('name');
    const elem2 = (<any>window).document.getElementById('image');
    if (elem1) {
      elem1.parentNode.removeChild(elem1);
    }
    if (elem2) {
      elem2.parentNode.removeChild(elem2);
    }
    let oMeta1 = document.createElement('meta');
    let oMeta2 = document.createElement('meta');
    oMeta1.content = this.articleinfo.title;
    oMeta1.id = 'name';
    oMeta2.content = this.articleinfo.photo;
    oMeta2.id = 'image';
    document.getElementsByTagName('head')[0].appendChild(oMeta1);
    document.getElementsByTagName('head')[0].appendChild(oMeta2);
    (<any>window).document
      .getElementById('name')
      .setAttribute('itemprop', 'name');
    (<any>window).document
      .getElementById('image')
      .setAttribute('itemprop', 'image');
  }

  // 图片加载完成刷新滚动
  public refreshImg(): void {
    setTimeout(() => {
      (<any>this).$refs.scroll.refresh();
    }, 300);
  }

  /**
   * 最新评论
   */
  public getLastComment(): void {
    this.post('api/v1/getLastComment', {
      object_name: 'article',
      object_id: this.id,
    }).then((res: any) => {
      this.comment = [res.data, ...this.comment];
    });
  }
}
</script>

<style scoped lang="stylus">
* {
  background: #efeff4;
  box-sizing: border-box;
}

.scroll {
  height: calc(100vh - 100px - 45px);
}

.Articledetail {
  min-height: 100vh;
}

.send-btn {
  padding: 6px 8px;
  background: #339933;
  color: white;
  font-weight: bold;
  border-radius: 5px;
}

.comment-foot {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 50px;
  padding: 0 10px;
  background: white;
  align-items: center;

  > img {
    width: 30px;
    height: 30px;
    background: white;
  }

  .comment-input {
    width: 50vw;
    height: 30px;
    border-radius: 8px;
    padding: 0 10px;
  }
}

.article-comment {
  padding: 10px;
  padding-top: 0;
  /* margin-top 5px */
  border-top: 3px solid #bbb;

  .comment-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;

    .comment-title {
      text-align: left;
      padding-left: 30px;
      margin-top: 10px;
      font-size: 12px;
      font-weight: bold;
    }

    .comment-time {
      text-align: left;
      padding-left: 30px;
      margin-top: 10px;
      font-size: 12px;
      color: #808080;
    }

    .comment-list-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .read-num-dot {
        display: flex;
        flex-direction: row;
        align-items: center;

        .dot-pic {
          width: 15px;
          height: 15px;
        }

        .dot-title {
          position: relative;
          top: 2px;
          font-size: 12px;
          color: #808080;
          margin-left: 5px;
        }
      }

      .top-head {
        display: flex;
        align-items: center;

        .top-pic {
          width: 25px;
          height: 25px;
        }

        .top-title {
          margin-left: 5px;
          font-size: 12px;
          color: #015bff;
          font-weight: bold;
        }
      }
    }
  }
}

.article-ad {
  width: 100vw;
  height: 100%;
}

.read-num {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

  .read-num-title {
    font-size: 12px;
    color: #808080;
  }

  .read-num-dot {
    display: flex;
    flex-direction: row;
    align-items: center;

    .dot-pic {
      width: 15px;
      height: 15px;
    }

    .dot-title {
      position: relative;
      top: 2px;
      font-size: 12px;
      color: #808080;
      margin-left: 5px;
    }
  }
}

.search-main {
  background: #efeff4;
  height: 45px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
  justify-content: space-between;

  .search-input {
    height: 24px;
    width: 54vw;
    border: 1px solid #808080;
    background: white;
  }

  .search-btn {
    width: 16vw;
    height: 26px;
    line-height: 28px;
    background: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
  }
}

.article-main {
  .article-body {
    padding: 10px;

    /* border-bottom 3px solid #bbb */
    .detail-title {
      font-size: 14px;
      line-height: 18px;
      text-align: justify;
      margin-bottom: 10px;
    }

    .detail-pic {
      width: calc(100vw - 20px);
      height: 100%;
    }
  }

  .article-list {
    padding: 10px;
    background: #efeff4;
    display: flex;
    flex-direction: row;
    border-bottom: 3px solid #bbb;

    .article-content {
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .article-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 20px;
        font-weight: bold;
        font-size: 14px;
      }

      .article-information {
        margin-top: 5px;
        display: flex;
        flex-direction: row;

        div {
          margin-right: 15px;
          font-size: 12px;
          color: #808080;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
